<style lang="less" scoped>
.scroll{
  width: 100%;
  overflow: hidden;
  position: relative;
  .innder{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: left 1.5s;
    display: flex;
    div{
      height: 100%;
      background: url(../assets/images/skinbg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      img{
        height: 60%;
      }
      p{
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #FFA32A;
        padding: 3px 24px;
        overflow: hidden;
        img{
          width: 24px;
          margin-right: 5px;
        }
      }
      .skinname{
        display: block;
        color: #939CAB;
        height: 26px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>

<template>
  <div class="scroll" :style="{height: `${height / 2}px`}">
    <div class="innder" :style="{left: `${position / 2}px`, 'padding-left': `${padding}px`}">
      <div v-for="(item, index) in pageData.list" :key="index" :style="{ width: `${width / 2}px` }">
        <img :src="item.skinImage" alt="">
        <p><img src="../assets/images/money.png" alt="">{{item.price}}</p>
        <p class="skinname">{{item.skinName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue"

export default {
  props: {
    list: {
      default: [],
      type: Array
    }
  },
  setup(props) {
    console.log(props.list)
    // 数据列表
    const pageData = reactive({
      list: props.list
    })
    // 显示个数
    let showNum = ref(3)
    let width = ref(251)
    let height = ref(200)
    let position = ref(0)
    let padding = ref(0)

    let timer = null
    if (pageData.list.length < showNum.value + 2) {
      console.log(11)
      let arr = []
      function creatarr() {
        pageData.list.forEach(item => {
          arr.push({ ... item })
          console.log(arr)
          if (arr.length < showNum.value + 2) {
            console.log(arr, 1)
            creatarr()
          } else {
            pageData.list = arr
            console.log(pageData.list)
          }
        })
      }
      creatarr()
    }
    const move = () => {
      timer = setInterval(() => {
        position.value = position.value - width.value
        setTimeout(() => {
          padding.value += width.value / 2
          pageData.list.push(pageData.list.shift())
          console.log(pageData.list)
        }, 1.5 * 1000);
      }, 3 * 1000);
    }

    onMounted(() => {
      move()
    })

    onBeforeUnmount(() => {
      clearInterval(timer)
    })

    return {
      pageData,
      showNum,
      position,
      width,
      height,
      padding
    }
  }
}
</script>